<template>
    <div style="padding:15px;">
        <vxe-toolbar id="toolbarId" :setting="{storage: true}" export :refresh="{query: findList}">
            <template v-slot:buttons>
                <el-button @click="findList">查询</el-button>
            </template>
        </vxe-toolbar>
        <vxe-table
                ref="xTable"
                border
                show-footer
                resizable
                stripe
                highlight-current-row
                highlight-hover-row
                show-header-overflow show-overflow
                row-id="id"
                class="mytable-footer"
                height="700"
                :data="tableData"
                remote-sort
                @sort-change="sortList"
        >
            <vxe-table-column>
                <vxe-table-column field="logtime" title="记录时间" min-width="120" />
                <template v-slot:header="{ column }">
                  <el-input v-model="listQuery.level" placeholder="请输入" clearable />
                </template>
            </vxe-table-column>
            <vxe-table-column>
                <vxe-table-column field="level" title="日志级别" min-width="50" />
                <template v-slot:header="{ column }">
                    <el-input v-model="listQuery.level" placeholder="请输入" clearable />
                </template>
            </vxe-table-column>
            <vxe-table-column>
                <vxe-table-column field="ip" title="ip" min-width="100" />
                <template v-slot:header="{ column }">
                    <el-input v-model="listQuery.ip" placeholder="请输入" clearable />
                </template>
            </vxe-table-column>
          <vxe-table-column>
            <vxe-table-column field="loginname" title="登录账号" min-width="100" />
            <template v-slot:header="{ column }">
              <el-input v-model="listQuery.loginname" placeholder="请输入" clearable />
            </template>
          </vxe-table-column>
          <vxe-table-column>
            <vxe-table-column field="getmethod" title="请求方式" min-width="100" />
            <template v-slot:header="{ column }">
              <el-input v-model="listQuery.getmethod" placeholder="请输入" clearable />
            </template>
          </vxe-table-column>
          <vxe-table-column>
            <vxe-table-column field="type" title="类型" :formatter="formatterType" min-width="100" />
            <template v-slot:header="{ column }">
              <el-select v-model="listQuery.type" placeholder="请选择" clearable>
                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </template>
          </vxe-table-column>
          <vxe-table-column>
            <vxe-table-column field="url" title="请求连接" min-width="100" />
            <template v-slot:header="{ column }">
              <el-input v-model="listQuery.url" placeholder="请输入" clearable />
            </template>
          </vxe-table-column>
          <vxe-table-column>
            <vxe-table-column field="result" title="结果" min-width="100" />
            <template v-slot:header="{ column }">
              <el-input v-model="listQuery.result" placeholder="请输入" clearable />
            </template>
          </vxe-table-column>
          <vxe-table-column>
            <vxe-table-column field="desc" title="描述" min-width="100" />
            <template v-slot:header="{ column }">
              <el-input v-model="listQuery.desc" placeholder="请输入" clearable />
            </template>
          </vxe-table-column>
        </vxe-table>
        <vxe-pager
                :loading="loading"
                :current-page.sync="listQuery.pageNum"
                :page-size.sync="listQuery.pageSize"
                :total="listQuery.total"
                :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
                @page-change="handlePageChange"
        />

    </div>
</template>
<script>
    import Vue from 'vue'
    import 'xe-utils'
    import VXETable from 'vxe-table'
    import 'vxe-table/lib/index.css'
    import XEUtils from 'xe-utils'
    import VXEUtils from 'vxe-utils'
    Vue.use(VXETable, VXEUtils, XEUtils, { mounts: ['cookie'] })
    import request from '@/utils/request'
    export default {
        name: 'userActionList',
        components: { },
        data() {
            return {
                message: '',
                loading: false,
                tableData: [],
                listQuery: {
                    logtime: '',
                    thread: '',
                    level: '',
                    classname: '',
                    ip: '',
                    loginname: '',
                    getmethod: '',
                    type: '',
                    url: '',
                    postparams: '',
                    result: '',
                    desc: '',
                    total: 0
                },
                // 类型
                typeOptions: [
                    { label: '越权', value: 'beyond'},
                    { label: 'sql注入', value: 'sql'},
                    { label: '短信', value: 'sms'},
                    { label: '中交兴路', value: 'zjxl'},
                ]
            }
        },
        created() {
            this.findList()
        },
        methods: {
            findList() {
                this.loading = true
                request({
                    url: '/ntocc-es-api/es/findUserLog',
                    method: 'post',
                    data: this.listQuery
                }).then(response => {
                    this.tableData = response.data.records
                    this.listQuery.total = response.data.total
                    this.loading = false
                })
            },
            // 翻译类型
            formatterType({ cellValue }) {
                const item = this.typeOptions.find(item => item.value === cellValue)
                return item ? item.label : ''
            },
            // 排序
            sortList({ column, property, order }) {
                if (order) {
                    this.listQuery.sortField = property
                    this.listQuery.sortType = order
                } else {
                    this.listQuery.sortField = ''
                }
                this.findList()
            },
            // 分页handle
            handlePageChange({ currentPage, pageSize }) {
                this.listQuery.pageNum = currentPage
                this.listQuery.pageSize = pageSize
                this.findList()
            }
        }
    }
</script>

<style>
  .vxe-table .vxe-body--column:not(.col--ellipsis), .vxe-table .vxe-footer--column:not(.col--ellipsis), .vxe-table .vxe-header--column:not(.col--ellipsis) {
    padding: 6px 0;
  }
  .vxe-toolbar{padding:0 0 10px 0}
</style>
